﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: head('地区列表')"></head>
<link rel="stylesheet" th:href="@{/plugins/zTree/zTreeStyle.css}" type="text/css">
<body>
<nav class="breadcrumb">
    首页 <span class="c-gray en">/</span>地区管理<span class="c-gray en">/</span>地区列表
    <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="Hui-left">
    <div class="ztree" id="areaTree" style="margin-left: 15px;"></div>
</div>
<div class="Hui-rigth page-container" style="overflow:auto;">
    <div class="text-c">
        <input type="hidden" id="pcode"/>
        <button id="schmit" type="button" class="hidden"></button>
    </div>
    <table id="tableList" class="table table-striped table-bordered table-hover">
        <thead>
            <tr class="text-c">
                <th>地区代码</th>
                <th>地区名称</th>
                <th>简称</th>
                <th>经度</th>
                <th>纬度</th>
                <th>排序</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div th:include="include :: footer"></div>
<div th:include="include :: tables"></div>
<div th:include="include :: ztree"></div>
<script th:inline="javascript">
    $(function () {
        var catalogTable = $('#tableList').DataTable({
            dom: "l",
            paging: false,
            ordering: false,
            serverSide: true,
            ajax: {
                url: '/area/list',
                type: 'post',
                dataType: 'JSON',
                data: function (d) {//自定义需要传递的参数
                    var param = {};
                    param.pcode = $("#pcode").val();
                    return param;
                }
            },
            order: [1, 'asc'],
            columnDefs: [{"orderable": false, "targets": 0}],
            columns: [
                {"data": "CODE"},
                {"data": "NAME"},
                {"data": "SHORT_NAME"},
                {"data": "LNG"},
                {"data": "LAT"},
                {"data": "SORT"}
            ],
            createdRow: function (row, data, index) {
                $(row).addClass('text-c');
            }
        });
        $('#tableList').on('click', '#isAllCheck', function (e) {
            var check = $(catalogTable.rows).find("input[name='check']");
            if ($(this).is(":checked")) {
                check.prop("checked", true);
            } else {
                check.prop("checked", false);
            }
        });

        var onClickArea = function (e, treeId, treeNode) {
            $("#pcode").val(treeNode.id);
            $("#schmit").click();
        };

        var ztree = new $ZTree("areaTree", "/area/tree");
        ztree.bindOnClick(onClickArea);
        ztree.init();
    });
</script>
</body>
</html>
